<template>
  <view id="menu_bar_left">
    <el-row class="tac">
      <el-col>
        <el-menu
          :uniqueOpened="false"
          :default-active="default_index"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          background-color="#393d49"
          text-color="#fff"
          active-text-color="#fff"
        >
          <MenuItem
            v-for="item in itemList"
            :key="item.index"
            :menuItem="item"
          />
        </el-menu>
      </el-col>
    </el-row>
  </view>
</template>

<style scoped>
#menu_bar_left {
  width: 101%;
  height: 100%;
  background: #393d49;
  overflow: hidden;
}
</style>
<script>
import MenuItem from "@/components/scraw/MenuItem.vue";
export default {
  components: {
    MenuItem,
  },
  props: {
    itemList: {
      Type: Array,
      default: () => {},
    },
    default_index:{
      Type:String,
      default:'1-1'
    }
  },
  data: function () {
    return {
      menu: {},
    };
  },
  methods: {
    handleOpen(index) {
    },
    handleClose(index) {
    },
    handleSelect(index) {
      let route = null
      var findRoute = function(list) {
        if(!list || list.length < 1)  return null;
        for(let i = 0; i < list.length; i++) {
          let item = list[i];
          // console.log('------index['+item.index+'] route['+item.route+']--')
          // console.log('!!item.route['+(!!item.route)+', '+(item.index === index)+'--]')
          if(item.route && item.index === index) route = item.route
          findRoute(item.child)
        }
        return null;
      }
      findRoute(this.itemList)
      if(route) this.$emit("choose", route)
    },
  },
};
</script>

